
<template>
	<!-- 组件-教学计划表格 -->
	<div style="width:100%;">
		<el-popover
			placement="right"
			width="300"
			trigger="click"
			v-model="visible">
			 <el-tabs v-model="activeName">
				<el-tab-pane label="课程" name="course">
					<el-row v-for="(row,index) in courseList" :key="index">
						<!-- <el-col :span="20">{{row.name}}</el-col> -->
						<el-col :span="24">
							<el-checkbox v-model="row.checked">{{row.name}}</el-checkbox>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="餐点" name="meal">
					<el-row v-for="(row,index) in mealList" :key="index">
						<!-- <el-col :span="20">{{row.name}}</el-col> -->
						<el-col :span="24">
							<el-checkbox v-model="row.checked">{{row.name}}</el-checkbox>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
			<el-button @click="visible = false">取消</el-button>
			<el-button @click="save">确认</el-button>
			
			<el-button v-if="selectstring==''" slot="reference" icon="el-icon-circle-plus-outline" type="text"></el-button>
			<el-button v-else slot="reference" type="text" disabled>{{selectstring}}</el-button>
		</el-popover>
	</div>
</template>

<script>
	export default{
		components:{},
		data(){
			return {
				visible:false,
				activeName:'course',
				courseList:[
					{name:'课程测试1',checked:false},
					{name:'课程测试2',checked:false},
					{name:'课程测试3',checked:false},
				],
				mealList:[
					{name:'餐费测试1',checked:false},
					{name:'餐费测试2',checked:false},
					{name:'餐费测试3',checked:false},
				],
				selectstring:'',
			}
		},
		methods:{
			getCombinestring(){
				let list=this.activeName=='course'?this.courseList:this.mealList;
				let temp='';
				list.forEach(ele=>{
					if(ele.checked){
						temp+=ele.name+',';
					}
				});
				if(temp.length>0)temp=temp.substr(0,temp.length-1);
				
				return temp;
			},
			save(){
				this.selectstring=this.getCombinestring();
				this.visible=false;
			},
		},
		mounted(){
			
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.el-row{
		margin-bottom: 0.08rem;
	}
	.alignRight{
		text-align: right;
	}
	// .popover-btn{
	// 	cursor: pointer;
	// }
	// .popover-btn[novalue='1']{
	// 	color: #979797;
    // 	font-style: italic;
	// }

	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>
<style scoped src="@/style/module/table.css"></style>